import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const whatIfView = defineView({
  /**
   * @implements {ng.IController}
   */
  controller: class {
    static $inject = ["$scope", "$compile", "$timeout"];

    errorContent = "";

    /**
     * @param {ng.IScope} $scope
     * @param {ng.ICompileService} $compile
     * @param {ng.ITimeoutService} $timeout
     */
    constructor($scope, $compile, $timeout) {
      this.$scope = $scope;
      this.$compile = $compile;
      this.$timeout = $timeout;
    }

    $onInit() {
      this.errorContent = "";
    }

    /**
     * @param {string} content
     */
    setContent(content = "err") {
      Promise.reject().then(
        () => {},
        (err) => {
          this.errorContent = content;
          this.$timeout(() => {
            this.errorContent = "";
            // const scope = this.$compile(this.errorContent)(this.$scope);
            // console.log("scope", scope);
          }, 3000);
        },
      );
    }

    /* #__DEBUG__ */
    handleClick() {
      console.log("handleClick", this.$scope);
    }
  },
  controllerAs: "$what",
  template: /* HTML */ html`
    <!-- TODO: -->
    <div>
      <button class="btn" ng-click="$what.setContent()">What if?</button>
      <div ng-if="$what.errorContent">
        Error: <span ng-cloak>{{ $what.errorContent }}</span>
      </div>
      ${DebugButtonHTML("$what")}
    </div>
  `,
});

export default whatIfView;
// import.meta.webpackHot.accept(
//   "./what-if.mjs",
//   (outdatedDependencies) => {
//     // angular.reloadWithDebugInfo();
//   },
// );
